<template>
	<view class="pageov">
		<!-- 搜索 start -->
		<view class="tui-header">
			<u-search placeholder="按公司简称搜索" v-model="keyWords" @search="searchClick" @custom="searchClick"></u-search>
		</view>
		<!-- 搜索 end -->

		<!-- 选择 start -->
		<view class="ov-menus-box">
			<view @click="menuClick(index)" :class="item.menuSelected ? 'ov-menu-selected' : 'ov-menu-item'" v-for="(item, index) in menuList" :key="index">
				<view class="ov-menu">{{ item.name }}</view>
				<view :class="item.menuSelected ? 'ov-menu-show' : 'ov-menu-hide'" class="ov-menu-line"></view>
			</view>
		</view>
		<!-- 选择 end -->

		<!-- 列表 start -->
		<view class="ov-list-box" v-if="showDataList">
			<view class="order" :class="[item.orderStatus === 1 ? 'blue':'',item.orderStatus === 2  ? 'green':'',item.orderStatus === 3 ? 'yellow':'',item.orderStatus === 4 ? 'red':'',item.orderStatus === 5 ? 'white':'']"
				  @click="itemClick(item)" v-for="(item, index) in orderList" :key="index">
				<view class="top">
					<view class="left">
						<view class="store">订单编号：{{ item.orderId }}</view>
					</view>
				</view>
				<view class="item">
					<view class="content">
						<u-row gutter="16">
							<u-col span="6">
								<view class="title">公司简称:{{ item.companyCode }}</view>
							</u-col>
							<u-col span="6">
								<view class="title">面料名称:{{ item.mlmcName }}</view>
							</u-col>
						</u-row>
						<u-row gutter="16">
							<u-col span="6">
								<view class="title">面料宽幅:{{ item.mlkfName }}</view>
							</u-col>
							<u-col span="6">
								<view class="title">订单数量:{{ item.totalNumber }}</view>
							</u-col>
						</u-row>
					</view>
				</view>
				<view class="bottom">
					<project-process :item="item"></project-process>
				</view>
			</view>
		</view>
		<!-- 列表 end -->
		<view v-else>
			<view class="centre">
				<image src="/static/img/bg/order.png" mode=""></image>
				<view class="explain">
					您暂无当前功能操作权限
				</view>
			</view>
		</view>
		<!-- 底部占位 start -->
		<view class="ov-placed"></view>
		<!-- 底部占位 end -->
		<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
	</view>
</template>

<script>
let _self;
import uniLoadMore from '../../components/uni-load-more.vue';
import projectProcess from '../../components/project-process.vue';
export default {
	components: {
		uniLoadMore,
		projectProcess
	},
	data() {
		return {
			hotSearch: ['可输入公司名称进行搜索', '可输入公司名称进行搜索'], // 热门搜索
			menuList: [
				{
					id: '0',
					name: '未完成',
					menuSelected: 'true',
					pageUrl:'/pages/order-info/transfer',
					apiUrl:'/zyRest/getZyNoCompleteList',
				},
				{
					id: '1',
					name: '已完成',
					menuSelected: 'false',
					pageUrl:'/pages/order-info/transfer',
					apiUrl:'/zyRest/getZyCompleteList',
				}
			], // 菜单列表
			thisMenuItem:{},
			orderList: [],
			curPage: 1, // 当前页码
			keyWords: '', // 关键词
			loadingText: '加载中...',
			loadingType: 0, //定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
			contentText: {
				contentdown: '',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多了'
			},
			userId: uni.getStorageSync('userId'),
			showDataList:true,
		};
	},
	onShow() {
		let role = uni.getStorageSync('roleKey');
		if(role.indexOf('TransferPerson') != -1){
			if(this.orderList.length>0){
				this.orderList = [],
				this.curPage = 1;
				_self.getData();
			}
		}else{
			this.showDataList = false;
			uni.showToast({
				title: '您暂无当前功能操作权限',
				duration: 2000,
				icon: 'none'
			});
		}
	},
	onLoad() {
		_self = this;
		_self.curPage = 1;
		_self.dataInit();
	},
	onPullDownRefresh: function() {
		//下拉刷新的时候请求一次数据
		_self.curPage = 1;
		_self.getData();
	},
	onReachBottom: function() {
		//触底的时候请求数据，即为上拉加载更多
		//为了更加清楚的看到效果，添加了定时器
		_self.curPage++;
		_self.loadingType = 1;
		setTimeout(function() {
			_self.getData();
		}, 1000);
	},
	methods: {
		// 列表点击
		itemClick(item) {
			this.$u.route({
				url: _self.thisMenuItem.pageUrl,
				params: {
					id: item.id,
					status: item.status
				}
			});
		},
		// 搜索
		searchClick() {
			_self.curPage = 1;
			_self.getData();
		},
		// 数据初始化
		dataInit() {
			_self.menuList.forEach(item => {
				this.$set(item, 'menuSelected', false);
			});
			_self.menuList[0].menuSelected = true;
			_self.thisMenuItem = _self.menuList[0];
			_self.getData();
		},
		// 列表初始化
		async getData() {
			_self.loading = true;
			let apiUrl = _self.thisMenuItem.apiUrl;
			_self.$http
				.post(apiUrl, {
					pageNum: _self.curPage,
					pageSize: 15,
					userId: _self.userId,
					companyCode: _self.keyWords
				})
				.then(res => {
					uni.stopPullDownRefresh();
//					console.log(res)
					if (res.data.code == '0') {
						_self.loading = false;
						if(res.data.data.length == 0 || res.data.data.length <= 15){
							_self.loadingType = 2
						}
						if( _self.curPage === 1){
							_self.orderList = [];
						}
						_self.orderList = _self.orderList.concat(res.data.data);
						uni.stopPullDownRefresh();
					}
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon: 'none'
					});
				});
		},
		// 菜单点击切换
		menuClick(index) {
			_self.menuList.forEach(item => {
				this.$set(item, 'menuSelected', false);
			});
			_self.menuList[index].menuSelected = true;
			_self.thisMenuItem = _self.menuList[index]; //当前菜单
			_self.curPage = 1;
			_self.getData();
		}
	}
};
</script>
<style lang="scss">
	@import "../../static/css/new_list.scss"
</style>